<template>
  <div class="card">
    <div class="card-title">
      <div class="line">
      </div>
      <slot name="title">
        <span>{{title}}</span>
      </slot>
    </div>
    <div class="card-body">
      <slot />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: String,
});
</script>

<style lang="less" scoped>
.card {
  position: relative;
  width: calc(100% - 20px);
  margin: 0 auto;
  border: 1px solid #e5e5e5;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  .card-title {
    position: relative;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 10px;
    color: var(--van-primary-color);
    // font-weight: 600;
    .line {
      position: absolute;
      width: 5px;
      height: 25px;
      background-color: var(--van-primary-color);
      top: 50%;
      left: -1px;
      transform: translateY(-50%);
    }
  }
  .card-body {
    position: relative;
  }
}
.card + .card {
  margin-top: 20px;
}
</style>